<script>
// 顶部tab+页面切换
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>
import { formatDate } from '@/utils'
import { reqClientList } from '@/api'
import { customerDataList } from '@/data'
import { deepClone, isEmpty, customerStatus } from '@/utils'
import MyIcon from '@/components/my-icon/index.vue'
import { toRaw } from '@vue/reactivity'
import { ref } from 'vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
const props = defineProps({
	type: {
		type: Number,
		default: 1
	}
})
const selfTime = ref([])
const total = ref(0)
const pageNo = ref(1)
const queryForm = ref({
	qrId: ''
})
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
	dialogVisible.value = true
	chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
	console.log(val, '数据回显')
	staffData.value = val
	handleRefresh()
}
const chooseDialogue = ref(null)
const tableData = ref()

const getData = async (obj) => {
	if (props.type == 1) {
		console.log('个人群发获取基础数据')
	} else {
		console.log('群主群发获取基础数据')
	}
	let queryForm = {
		page: pageNo.value,
		size: 10
	}
	if (obj) {
		queryForm.page = 1
		queryForm = Object.assign(queryForm, toRaw(obj))
	}
	const r = await reqClientList(queryForm)
	if (r) {
		tableData.value = r.data.item
		total.value = r.data.count
	}
}
getData()

const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)

const exportExcel = () => {
	console.log('导出excel')
}
const handleCurrentChange = (val) => {
	pageNo.value = val
	getData()
}
const handleSelectAll = () => {
	multipleTableRef.value.clearSelection()
	if (selectAll.value) {
		tableData.value.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined)
		})
	}
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
	if (multipleSelection.value.length == qrDataSetList.value.length) {
		selectAll.value = true
	} else {
		selectAll.value = false
	}
}
const emits = defineEmits(['showDetail'])
defineExpose({
	getData
})
</script>
<template>
	<div class="app-table-box app-flex-2">
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		<div class="app-flex-left">
			<span class="app-select-right">选择员工：</span>
			<span v-if="isRefresh">
				<span @click="chooseStaff" class="app-gap-words-left app-flex-2 app-choose-staff" v-if="staffData.length > 2">
					<span class="app-flex-left">
						<el-avatar
							v-if="staffData[0].avatar"
							class="cho-margin"
							shape="square"
							:size="30"
							:src="staffData[0].avatar"
						/>
						<span>{{ staffData[0].name }}等{{ staffData.length }}个账号</span>
					</span>
					<el-icon>
						<ArrowDown />
					</el-icon>
				</span>
				<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
					<span class="app-flex-left" v-for="(item, index) in staffData" :key="index">
						<el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
						<span>{{ item.name }}</span>
					</span>
					<span v-if="staffData.length == 0"> </span>
					<el-icon>
						<ArrowDown />
					</el-icon>
				</span>
			</span>
			<span class="app-gap-words-left app-select-right">选择时间：</span>
			<el-date-picker
				class="app-date-picker"
				v-model="selfTime"
				type="daterange"
				range-separator="~"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				size="large"
			/>
		</div>
		<el-button class="app-btn" @click="clear">重置</el-button>
	</div>

	<div class="app-table-box">
		<div>
			<div class="app-flex-2">
				<div class="app-flex-left">
					<span class="app-words-2 app-flex-left"
						>共有{{ total }}条群发内容<span class="weak-grey-font app-gap-words-left">|</span>
						<div @click="getData">
							<div style="height: 4px"></div>
							<MyIcon class="app-pointer app-gap-words-left weak-grey-font" name="Fresh" />
						</div>
						<span class="app-words-2 weak-grey-font app-gap-words-left">更新数据</span>
						<span class="app-words-2 weak-grey-font app-gap-words-left">更新于：2022-10-21 22:47</span>
					</span>
				</div>
				<el-button class="app-btn" @click="exportExcel">导出Excel</el-button>
			</div>

			<el-table
				class="app-container-radius a-mt20"
				ref="multipleTableRef"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
				:cell-style="{ fontSize: '14px', padding: '20px 0' }"
			>
				<el-table-column width="140" label="消息类型" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<span class="">
								{{ scope.row.name }}
							</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="创建者" align="left">
					<template #default="scope">
						<div class="app-words-box">
							<div class="app-flex-left">
								<MyIcon class="app-down-icon primary-font" name="Person" />
								<span class="app-gap-words-left-xs">{{ scope.row.name }}</span>
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="发送时间" prop="createTime" align="left">
					<template #default="scope">
						{{ formatDate(scope.row.createtime, 'yyyy-MM-dd hh:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column label="送达客户数" prop="score" align="left"></el-table-column>
				<el-table-column label="失败客户数" prop="score" align="left">
					<template #header>
						<div class="app-flex-left">
							<span class="">失败客户数</span>
							<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
								<div class="app-container pop-max-width">失败原因：员工已不是客户好友或客户已收到其他群发消息</div>
								<template #reference>
									<MyIcon class="question-icon" name="Question" />
								</template>
							</el-popover>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<span class="app-primary-font app-pointer" @click="emits('showDetail', scope.row.id)">详情</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="app-page"
				@current-change="handleCurrentChange"
				background
				layout="prev, pager, next"
				:total="total"
			/>
		</div>
	</div>
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
@import '../../../../style/mixin.scss';
</style>
